<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>区县列表页</title>
    <%@include file="../util/common.jsp"%>
    <script src="${pageContext.request.contextPath}/static/js/pagination.min.js"></script>
    <style>
        form{
            padding: 10px 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>区县列表</h1>
    <div class="row">
        <div class="col-md-12">
            <form id="search-form" class="form-inline">
                <div class="form-group">
                    <label for="districtName">区县名称：</label>
                    <input type="text" class="form-control" name="districtName" id="districtName" placeholder="" value="${districtName}">
                </div>
                <input type="hidden" name="pageNo" id="pageNo">
                <button type="button" class="btn btn-default btn-search"> 搜索 </button>
                <button type="button" class="btn btn-info btn-add"> 新增区县 </button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>区县名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="table-body">
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">

                </ul>
            </nav>
        </div>
        <div class="col-md-6" >
            <p>第${param.pageNo}页/总${param.pageCount}页 共${param.totalCount}条记录</p>
        </div>
    </div>
</div>

<!-- 新增窗口 -->
<div id="AddModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="#addLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addLabel">新增区县</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="add-form">
                    <div class="form-group">
                        <div class="alert alert-danger add-form-alert" style="display: none" role="alert"></div>
                        <label for="add-districtName" class="col-sm-2 control-label">区县名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="add-districtName" name="districtName" value="" placeholder="请输入区县名">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-form-add">新增</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div id="deleteModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="#myModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">删除提示</h4>
            </div>
            <div class="modal-body">
                您确认要删除区县<span class="districtName"></span>吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-delete">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div id="alertModel" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">

        </div>
    </div>
</div>

    <script>
        let deleteId;
        $(function(){
            // 加载表单数据
            loadTable();

            $(".btn-search").click(function () {
                loadTable();
            });

            $(".btn-add").click(function () {
                // 重置
                $(".add-form-alert").hide();
                $("#add-form :text").val("");
                $('#AddModal').modal({
                    keyboard: false
                });
            });

            $(".btn-form-add").click(function () {
                $(".add-form-alert").hide();
                const url = "${pageContext.request.contextPath}/rent/district/add";
                $.post(url,$("#add-form").serialize(),function (data) {
                    if (data.code==1){
                        $('#AddModal').modal('hide');
                        $("#alertModel .modal-content").text("新增成功！");
                        // 显示提示的模态窗
                        $('#alertModel').modal({
                            keyboard: false
                        });
                        loadTable();
                    }else{
                        $(".add-form-alert").text(data.errorMsg).show();
                    }
                })
            });

            // 修改功能
            // 点击修改按钮-> 获取区县ID -> ajax得到区县信息 -> 初始化修改的表单 -> 显示修改的模态窗

           $(".btn-delete").click(function(){
               // 隐藏确认删除的模态窗
               $('#deleteModal').modal('hide');
               // 组装删除的URL
               let url = "${pageContext.request.contextPath}/rent/district/del?id="+deleteId;
               // 发起删除的ajax
               $.get(url,function (data) {
                   // 如果请求成功
                    if (data.code=1){
                        // 修改提示模态窗内容
                        $("#alertModel .modal-content").text("删除成功！")
                        // 请求成功后还应该刷新列表页显示
                        loadTable();
                    }else{
                        // 添加错误提示信息
                        $("#alertModel .modal-content").text(data.errorMsg);
                    }
                    // 显示提示的模态窗
                   $('#alertModel').modal({
                       keyboard: false
                   });

               })
           });
        });


        function del(id,name) {
            deleteId = id;

            $(".districtName").text(name);
            // 显示确认删除的模态窗
            $('#deleteModal').modal({
                keyboard: false
            });
        }

        function go(pageNo){
            // 将pageNo赋值给表单的pageNo字段
            $("#pageNo").val(pageNo);
            // 提交表单
            loadTable();
        }

        function loadTable() {
            // 发起ajax请求，获取分页列表数据
            let url = "${pageContext.request.contextPath}/rent/districts";
            // 组装参数(获取搜索表单中的所有参数)
            let data = $("#search-form").serialize();
            $.post(url,data,function (data) {
                $(".table-body").html("");
                // data -> result {code:1,date:{rows:}}
                // 获取区县集合
                const rows = data.data.rows;
                // 组装表单数据
                $.each(rows,function (index, value) {
                    var idTd = $("<td></td>").text(value.id);
                    var nameTd = $("<td></td>").text(value.name);
                    var operTd = $("<td></td>").html($("<a class=\"btn btn-primary btn-xs\" href='#'>修改</a>"))
                    $("<tr></tr>").append(idTd,nameTd,operTd).appendTo($(".table-body"));
                });
                //设置分页工具条
                $(".pagination").html("");
                // 首页
                const shouye = $("<a></a>").html("<span aria-hidden=\"true\">首页</span>").attr({
                    "href": "javascript:go(1)"
                });
                $("<li></li>").append(shouye).appendTo($(".pagination"));
                // 上一页
                if (data.data.pageNo!=1){
                    const previous = $("<a></a>").text(data.data.pageNo-1).attr("href","javascript:go("+(data.data.pageNo-1)+")");
                    $("<li></li>").append(previous).appendTo($(".pagination"));
                }
                // 当前页
                $("<li></li>").addClass("active").html("<span>"+data.data.pageNo+"</span>").appendTo($(".pagination"));
                // 下一页
                if (data.data.pageNo!=data.data.totalPage){
                    const next = $("<a></a>").text(data.data.pageNo+1).attr("href","javascript:go("+(data.data.pageNo+1)+")");
                    $("<li></li>").append(next).appendTo($(".pagination"));
                }
                // 首页
                const moye = $("<a></a>").html("<span aria-hidden=\"true\">末页</span>").attr({
                    "href": "javascript:go("+data.data.totalPage+")"
                });
                $("<li></li>").append(moye).appendTo($(".pagination"));

            });
        }

    </script>
<%--<tr>--%>
<%--    <!-- 获取集合遍历时的序号 -->--%>
<%--    <td>${status.count}</td>--%>
<%--    <td>${dis.name}</td>--%>
<%--    <td>--%>
<%--        <a class="btn btn-primary btn-xs" href="<c:url value="/rent/district/update">--%>
<%--                                    <c:param name="id" value="${dis.id}"/>--%>
<%--                                </c:url>">编辑</a>--%>
<%--        <button class="btn btn-warning btn-xs" onclick="del(${dis.id},'${dis.name}')">删除</button>--%>
<%--    </td>--%>
<%--</tr>--%>
</body>
</html>